<template>
	<view class="page">
		<u-form ref="uForm" class="big">
			<u-form-item label="头像" @click="touxiang" :right-icon="userList.avatarUrl">
			</u-form-item>
			<u-form-item label="昵称">
				<u-input input-align="right" v-model="name" />
			</u-form-item>
			<u-form-item label="性别">
				<u-input input-align="right" v-model="sex" type="select" @click="show1 = true" />
				<u-action-sheet :list="actionSheetList" v-model="show1" @click="actionSheetCallback"></u-action-sheet>
			</u-form-item>
			<u-form-item label="账号">
				<u-input input-align="right" v-model="zhanghao" />
			</u-form-item>
			<u-form-item label="手机号" label-width="100">
				<u-input input-align="right" v-model="phone" />
			</u-form-item>
			<u-form-item label="生日" label-width="100">
				<u-input input-align="right" v-model="shengri" @click="show2 = true" />
				<u-picker v-model="show2" mode="time" @confirm="queren1"></u-picker>
			</u-form-item>
			<u-form-item label="入会时间" label-width="130">
				<u-input input-align="right" v-model="ruhui" @click="show3 = true" />
				<u-picker v-model="show3" mode="time" @confirm="queren2" :params="params3"></u-picker>
			</u-form-item>
		</u-form>
		<u-button class="but" @click="submit">保存</u-button>
		<view>
			<u-modal v-model="show4" :content="tijiao" :mask-close-able="true"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show4: false,
				name: '',
				sex: '',
				zhanghao: "",
				phone: "",
				userList: {},
				show1: false,
				show2: false,
				show3: false,
				shengri: "",
				ruhui: "",
				tijiao: "",
				params3: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},

				],
			}
		},
		methods: {
			touxiang() {
				console.log(111);
				uni.getUserProfile({
					desc: "获取个人信息",
					success: (res) => {
						console.log(222);
						this.userList = res.userInfo
					}
				})
			},
			actionSheetCallback(index) {
				this.sex = this.actionSheetList[index].text;
			},
			queren1(i) {
				console.log(i);
				this.shengri = i.year + "年" + i.month + "月" + i.day + "日"
			},
			queren2(i) {
				console.log(i);
				this.ruhui = i.year + "年" + i.month + "月" + i.day + "日" + i.hour + "时" + i.minute + "分" + i.second + "秒"
			},
			submit() {
				if (
					this.name !== "" &&
					this.sex !== "" &&
					this.phone !== "" &&
					this.ruhui !== "" &&
					this.shengti !== "" &&
					this.zhangaho !== ""
				) {
					this.tijiao = "提交成功"
					this.show4 = true
				} else {
					this.tijiao = "请填写必填项"
					this.show4 = true
				}
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 20rpx;
	}

	.big {
		padding: 0 20rpx;
	}

	.page .but {
		background-color: green !important;
		color: #fff !important;
		margin-top: 30rpx;
	}
</style>
